<template>
  <div class="slot-table">
    <vxe-grid
      border
      highlight-hover-row
      max-height="500"
      row-id="accountUnitCode"
      @cell-dblclick="cellClickEvent"
      row-class-name="my-row"
      ref="xTree"
      :form-config="tableForm"
      :data="tableData"
      :columns="tableColumn"
      @form-submit="findList"
      :tree-config="{
        children: 'children',
        iconOpen: 'el-icon-remove',
        iconClose: 'el-icon-circle-plus',
        expandRowKeys: defaultExpandKeys,
        reserve: true,
      }"
    >
      >
      <template v-slot:accountUnitCode="{ row }">
        <div>
          <template v-if="row.children && row.children.length">
            <i
              class="tree-node-icon"
              :class="
                $refs.xTree.isTreeExpandByRow(row)
                  ? 'el-icon-folder-opened'
                  : 'el-icon-folder'
              "
            ></i>
          </template>
          <template v-else>
            <i class="tree-node-icon el-icon-document"></i>
          </template>
          <span>{{ row.accountUnitCode }}</span>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>
<script>
export default {
  name: "SlotTree",
  data() {
    return {
      tableForm: null,
      tableData: null,
      tableColumn: null,
      defaultExpandKeys: ["DXJT0000"], //默认展开节点，暂时用于收款单位写死，后期视情况优化
    };
  },
  props: {
    config: {
      type: Object,
      default: {},
    },
  },
  watch: {
    "config.tableData": function (newVal) {
      this.tableData = newVal;
    },
    "config.tableForm": function (newVal) {
      this.config.tableForm = newVal;
    },
  },
  mounted() {
    this.getConfigInfo();
    // if (this.$attrs.config) {
    // 	this.tableForm = this.$attrs.config.tableForm;
    // 	this.tableData = this.$attrs.config.tableData;
    // 	this.tableColumn = this.$attrs.config.tableColumn;
    // 	// // let oldCulmn = this.tableColumn.shift();
    // 	// // 
    // 	// // this.tableColumn.unshift({ type: "seq", width: "5%" });
    // 	// Object.assign(this.tableColumn[0], {
    // 	// 	slots: { default: "accountUnitCode" },
    // 	// 	title: "单位编码",
    // 	// 	width: "25%",
    // 	// 	treeNode: true,
    // 	// });
    // 	// delete this.tableColumn[1].field;
    // }
  },
  methods: {
    getConfigInfo() {
      if (this.config) {
        this.tableForm = this.config.tableForm;
        this.tableData = this.config.tableData;
        this.tableColumn = this.config.tableColumn;
      }
    },
    /**
     * 查找表格数据
     */
    async findList() {
      this.$emit("findlist", this.tableForm.data);
    },

    /**
     * 单击击单元格触发
     */
    cellClickEvent(event) {
      this.$emit("clickcell", event.row);
      this.$emit("getrow", event.row);
    },
  },
};
</script>

<style lang="scss" scoped>
.slot-table {
  ::v-deep .myrow {
    cursor: pointer;
  }
}
</style>
